<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <input type="text" v-zcm:age.ismale.a.b.c="msg">
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>


        //所有的指令钩子函数中都会接收到两个参数
        //1. el: 指令所在的DOM元素
        //2. binding: 指令绑定的时候携带的所有的信息
                //指令书写的时候，各个部分的内容，都可以通过binding获取到
            

        //    v-focus
        //    v-model="shuju"
        //    v-bind:属性名="数据"
        //    v-on:事件名.事件修饰符="数据"

        // 指令的标准格式：
        //     指令名称:参数.修饰符="表达式"
        
        // 指令中所有的东西，都可以通过binding参数进行获取。
        // binding.name 指的就是指令的名称
        // binding.rawName =号左边所有的字符串
        // binding.expression 指的就是表达式本身 字符串
        // binding.value: 指的就是表达式所代表的值
        // binding.arg: 指的就是参数信息 :后的内容
        // binding.modifiers: 存的是修饰符信息 所有的修饰符都会被当做属性，存在modifiers对象中，值为true


        // 1. 学习钩子函数的调用时机
        // 2. 要知道我们可以通过binding获取到什么信息

        Vue.directive("zcm", {
            bind(el, binding){
                //只执行一次，在第一次被绑定到元素的时候调用
                console.log("bind被调用了");
                console.log(binding);
            },
            inserted(el){
                //只执行一次，当指令所在DOM元素被插入其父节点的时候调用
                //如果想要访问DOM元素，那么肯定要在inserted之后进行访问
                console.log("inserted被调用了");
            },
            update(el){
                //当指令绑定的数据发生变化的时候，就会调用这个函数，dom还没有更新
                console.log("update被调用了");
            },
            componentUpdated(el){
                //数据发生变换，dom更新之后调用
                console.log("componentUpdated被调用了");                
            },
            unbind(el){
                //当指令从元素上解绑的时候调用
            }
        })

        var vm = new Vue({
            el: "#app",
            data: {
                msg: "左牵黄，右擎苍"
            }
        })
    </script>
</body>

</html>